<template>
	<view class="helpCenter">
		<view class="tabs flex-between">
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">新手必读</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">操作问题</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">社区问题</view>
		</view>
		<view class="list-box">
			<block v-for="(item,index) in 5" :key="index">
				<view class="list flex-between">
					<view class="left">
						跟不上订单怎么办？
					</view>
					<image src="/static/arrow.png" mode="widthFix"></image>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex:0
			};
		},
		methods:{
			changeTab(i){
				this.tabIndex = i;
			}
		}
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	@color: #d4237a;
	.helpCenter{
		.tabs {
			background: white;
			// position: fixed;
			top: 0;
			width: 100vw;
			z-index: 10;
			view {
				width: 25%;
				font-size: 30rpx;
				font-weight: bold;
				color: #666;
				line-height: 2;
				padding-bottom: 10rpx;
		
				&.active {
					color: #000;
					position: relative;
		
					&::after {
						content: "";
						display: block;
						width: 30rpx;
						height: 4rpx;
						position: absolute;
						bottom: 5rpx;
						left: calc(50% - 15rpx);
						background: @color ;
					}
				}
			}
		
		}
	}
	.list-box{
		padding: 0 30rpx;
		
		.list{
			line-height: 3;
			font-size: 30rpx;
			border-bottom: 1px solid #eee;
			image{
				width: 30rpx;
				height: auto;
			}
		}
		
	}
</style>
